<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
      <el-breadcrumb-item>材料管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-select
          clearable
          size="small"
          v-model="formInline.storeid"
          placeholder="请选择仓库"
        >
          <el-option
            v-for="item in this.stores"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input
          size="small"
          v-model="formInline.select"
          placeholder="输入材料种类或材料名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleEdit()"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      id="pdfDom"
      size="small"
      :data="materialData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" sortable prop="id" label="ID" width="60">
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="tname"
        label="材料种类"
        width="160"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="introduce"
        label="材料描述"
        width="210"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="mname"
        label="材料名称"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="sname"
        label="适用仓库"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="quantity"
        label="单位"
        width="140"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="price"
        label="指导价"
        width="140"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="updatetime"
        label="最新修改时间"
        width="150"
      >
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 新增界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="35%"
      @click="closeDialog('edit')"
    >
      <el-alert
        title="材料一经创建便不可更改，请谨慎创建。"
        type="warning"
        :closable="false"
      >
      </el-alert>
      <br />
      <br />
      <el-form label-width="80px" ref="editForm" :rules="rules" :model="editForm">
        <!-- 选择是否用原有材料种类进行添加 -->
        <el-switch
          align="center"
          v-model="value1"
          @change="handleChange"
          active-text="使用原有的材料种类"
          inactive-text="新建材料种类"
        >
        </el-switch>
        <br />
        <br />
        <el-form-item label="材料种类" prop="materialtype">
          <el-input
            v-show="isusenew"
            size="small"
            v-model="editForm.materialtype"
            auto-complete="off"
            placeholder="请输入材料种类"
          ></el-input>
          <el-select
            v-show="isuseold"
            clearable
            size="small"
            v-model="editForm.materialtype"
            placeholder="请选择"
          >
            <el-option
              v-for="item in this.materialTypeData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材料名称" prop="mname">
          <el-input
            size="small"
            v-model="editForm.mname"
            auto-complete="off"
            placeholder="请输入材料名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" v-show="isusenew" prop="introduce">
          <el-input
            type="textarea"
            size="small"
            v-model="editForm.introduce"
            auto-complete="off"
            placeholder="请输入材料种类描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="quantity">
          <el-input
            size="small"
            v-model="editForm.quantity"
            auto-complete="off"
            placeholder="请输入材料单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="指导价" prop="price">
          <el-input
            size="small"
            type="number"
            :min="0"
            :max="99999"
            v-model="editForm.price"
            auto-complete="off"
            placeholder="请输入材料指导价"
          ></el-input>
        </el-form-item>
        <el-form-item label="适用仓库" prop="storeid">
          <el-select
            clearable
            size="small"
            v-model="editForm.storeid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in this.stores"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('edit')">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入请求方法
import { materialList, materialAdd } from "../../api/storeMG";
import { getStroeItem, getMaterialItem } from "../../api/basisMG";
import Pagination from "../../components/Pagination";
import print from "vue-print-nb";
export default {
  data() {
    return {
      loading: false, //是显示加载
      title: "编辑材料",
      editFormVisible: false, //控制编辑页面显示与隐藏
      // 编辑与添加
      editForm: {},
      // 请求数据参数
      formInline: {
        page: 1,
        size: 10,
      },
      // 仓库选择框数据源
      stores: [],
      // 材料种类选择框数据源
      materialTypeData: [],
      // 材料数据
      materialData: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      // 是否使用自己创建的材料种类
      isusenew: false,
      // 是否使用原有的材料种类
      isuseold: true,
      value1:"",
      // rules表单验证
      rules: {
        materialtype: [
          { required: true, message: "材料种类不能为空", trigger: "blur" },
        ],
        mname: [{ required: true, message: "材料名称不能为空", trigger: "blur" }],
        quantity: [{ required: true, message: "单位不能为空", trigger: "blur" }],
        price: [
          { required: true, message: "指导价不能为空", trigger: "blur" },
        ],
        storeid: [
          { required: true, message: "请选择适用仓库", trigger: "blur" },
        ],
      },

    };
  },
  // 注册组件
  components: {
    Pagination,
    print,
  },
  /**
   * 数据发生改变
   */
  watch: {},
  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline);
    this.getSelectItem();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取仓库列表数据和材料种类列表数据
    getSelectItem() {
      getStroeItem().then((res) => {
        if (res.status == 200) {
          this.stores = res.data;
        } else {
          this.$message({
            type: "info",
            message: "获取仓库列表失败,刷新页面试试",
          });
        }
      });
      getMaterialItem().then((res) => {
        if (res.status == 200) {
          this.materialTypeData = res.data;
        } else {
          this.$message({
            type: "info",
            message: "获取材料种类列表失败,刷新页面试试",
          });
        }
      });
    },
    // 获取数据方法
    getdata(parameter) {
      this.loading = true;
      // 获取材料列表
      materialList(parameter).then((res) => {
        this.loading = false;
        if (res.status == 200) {
          this.materialData = res.data;
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page;
          this.pageparm.pageSize = this.formInline.size;
          this.pageparm.total = res.count;
        } else {
          this.$message({
            type: "info",
            message: res.statusInfo.message,
          });
        }
      });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.size = parm.pageSize;
      this.getdata(this.formInline);
    },
    //搜索事件
    search() {
      this.getdata(this.formInline);
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      this.title = "新增材料";
    },
    // 编辑保存提交方法
    submitForm(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          this.editForm.isusenew =this.isusenew;
          materialAdd(this.editForm)
            .then((res) => {
              this.editFormVisible = false;
              this.loading = false;
              if (res.status == 200) {
                this.getdata(this.formInline);
                this.$message({
                  type: "success",
                  message: "添加材料成功！",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.statusInfo.message,
                });
              }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.loading = false;
              this.$message.error("保存失败，请稍后再试！");
            });
        } else {
          return false;
        }
      });
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == "edit") {
        this.editFormVisible = false;
      }
    },
    // 滑块状态发生变化时
    handleChange(val) {
      console.log(val);
      if (val) {
        this.isusenew = false;
        this.isuseold = true;
      } else {
        this.isusenew = true;
        this.isuseold = false;
      }
    },
  },
};
</script>

<style lang="css" scoped>
.user-search {
  margin-top: 20px;
}
</style>